<template>
  <!-- 跑马灯组件 -->
  <div ref="marquee-wrap" class="marquee-wrap">
    <div ref="scroll" class="scroll">
      <p class="marquee">{{ text }}</p>
      <p ref="copy" class="copy" />
    </div>
    <p ref="getWidth" class="getWidth">{{ text }}</p>
  </div>
</template>

<script>
export default {
  name: 'Marquee',
  props: ['val'],
  data() {
    return {
      timer: null,
      text: ''
    }
  },
  created() {
    const timer = setTimeout(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  mounted() {
    for (const item of this.val) {
      this.text += item
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    move() {
      const maxWidth = this.$refs['marquee-wrap'].clientWidth
      const width = this.$refs['getWidth'].scrollWidth
      if (width <= maxWidth) return
      const scroll = this.$refs['scroll']
      const copy = this.$refs['copy']
      copy.innerText = this.text
      let distance = 0
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= width) {
          distance = 16
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  }
}
</script>

<style scoped>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee{
    margin-right: 0.16rem;
  }
  p {
    word-break:keep-all;
    white-space: nowrap;
    font-size: 0.28rem;
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>
